<template>
	<view class="topic-nav  ">
		<view class="topic-nav-top u-f-ac u-f-jsb">
			<view class="topic-nav-top-hot">热门分类</view>
			<view @click="gotopic" class="topic-nav-top-more">更多 <u-icon name="arrow-right" color="#D6D6D6" size="28"></u-icon></view>
		</view>
		<view class="topic-nav-bottom u-f-ac">
			<block v-for="(lables,lableindex) in lables">
			<view class="lable">{{lables.name}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				
			}
			
		},
		props:{
			lables:Array
		},
		methods:{
			gotopic(){
				uni.navigateTo({
					url:'../../pages/topic/topic'
				})
			}
		}
	}
</script>

<style scoped>

	.lable{
		background-color: #F7F7F7;
		color: #A2A2A2;
		flex: 1;
		margin: 10upx;
		border-radius: 10upx;
		display: flex;
		
		justify-content: center;
	}
	.topic-nav-top:first-child{
		
		margin-bottom: 15upx;
	}
	.lunbo{
		margin: 10upx;
	}
	.topic-nav-top-hot{
		font-size:35upx;
		color: #333333;
	}
	.topic-nav-top-more{
		color: #D6D6D6;
	}
	.topic-nav{
		border-bottom: #EEEEEE 1upx solid;
		border-top: #EEEEEE 1upx solid;
		
		padding: 20upx;
	}
</style>
